<template>
  <div class="container">
    <el-card>
      <el-tabs v-model="activeName">
        <!-- 基础信息 -->
        <el-tab-pane label="基础信息" name="first">
          <!-- 表单筛选区域 -->
          <el-row type="flex" justify="center">
            <el-form ref="form" inline :model="queryData" :rules="rules">
              <el-row>
                <el-form-item label="标题" prop="title" style="width:600px">
                  <el-input
                    v-model="queryData.title"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="作者" prop="author">
                  <el-input
                    v-model="queryData.author"
                    size="small"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="分类" prop="cateid">
                  <el-select v-model="queryData.cateid" placeholder="请选择">
                    <el-option
                      v-for="item in cateList"
                      :key="item.id"
                      :label="item.catename"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="阅读次数" prop="click">
                  <el-input-number v-model="queryData.click" :min="1" @change="handleChange" />
                </el-form-item>
                <el-form-item label="创建时间" prop="create_date">
                  <el-date-picker
                    v-model="queryData.create_date"
                    type="datetime"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="是否推荐" prop="ishot">
                  <el-switch v-model="queryData.ishot" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item label="是否置顶" prop="istop">
                  <el-switch v-model="queryData.istop" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="收藏数量" prop="lovenum">
                  <el-input
                    v-model="queryData.lovenum"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-form-item label="文章缩略图" prop="pic">
                <el-upload
                  action="#"
                  :http-request="httpRequest"
                  :file-list="fileList"
                  list-type="picture"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip" />
                </el-upload>
              </el-form-item>
              <el-row style="width:610px">
                <el-form-item label="文章标签" prop="tags">
                  <el-checkbox-group v-model="queryData.tags">
                    <el-checkbox v-for="item in taglist" :key="item.id" :label="item.id">{{ item.tagname }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-row>
            </el-form>
          </el-row>
        </el-tab-pane>
        <!-- SEO信息 -->
        <el-tab-pane label="SEO信息" name="second">
          <el-row type="flex" justify="center">
            <el-form ref="form" inline :model="queryData" :rules="rules">
              <el-row style="width:600px">
                <el-form-item label="seo关键字" prop="keywords">
                  <el-input
                    v-model="queryData.keywords"
                    style="width: 417px"
                    type="textarea"
                    rows="3"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-row>
              <el-form-item label="seo的描述" prop="description">
                <el-input
                  v-model="queryData.description"
                  style="width: 417px"
                  type="textarea"
                  rows="3"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-form>
          </el-row>
        </el-tab-pane>
        <!-- 文章内容 -->
        <el-tab-pane label="文章内容" name="third">
          <el-row>
            <el-form ref="form" :model="queryData" :rules="rules" label-width="80px">
              <el-form-item label="文章内容" prop="content">
                <quillEditor v-model="queryData.content" rows="3" @blur="$refs.form.validateField('content')" />
              </el-form-item>
            </el-form>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-row type="flex" justify="center">
        <el-button type="success" size="small" @click="addArticle">立即发布</el-button>
        <el-button type="primary" size="small" @click="onReset">保存草稿</el-button>
        <el-button type="warning" size="small" @click="$router.push('/content_article')">返回列表</el-button>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getyddTagListApi } from '@/api/ydd_tag'
import { getyddCateListApi } from '@/api/ydd_cate'
import { addYddArticleInfoApi } from '@/api/ydd_article'
import { UploadFile } from '@/api/user'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'AdvPos',
  components: {
    // addForm
    quillEditor
  },
  data() {
    return {
      activeName: 'first', // 高亮的标签名称，同el-tab-pane组件上的name属性匹配
      num: 1,
      taglist: [], // 标签全部数据
      cateList: [], // 分类全部数据
      totalNum: 0, // 总数
      // 列表的需要的参数
      queryData: {
        author: '',
        cateid: '',
        click: '',
        content: '',
        create_date: '',
        description: '',
        ishot: '',
        istop: '',
        keywords: '',
        lovenum: '',
        pic: '',
        status: 0,
        tags: [],
        title: ''
      },
      // 表单校验
      rules: {
        author: [{ required: true, message: '请输入', trigger: 'blur' }],
        cateid: [{ required: true, message: '请输入', trigger: 'change' }],
        click: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        create_date: [{ required: true, message: '请输入', trigger: 'change' }],
        catdescriptioneid: [{ required: true, message: '请输入', trigger: 'blur' }],
        ishot: [{ required: true, message: '请输入', trigger: 'blur' }],
        istop: [{ required: true, message: '请输入', trigger: 'blur' }],
        keywords: [{ required: true, message: '请输入', trigger: 'blur' }],
        lovenum: [{ required: true, message: '请输入', trigger: 'blur' }],
        pic: [{ required: true, message: '请输入', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入', trigger: 'change' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      fileList: []
    }
  },
  created() {
    // 调用初始化
    this.initData()
  },
  methods: {
    // 添加文章
    async addArticle() {
      await this.$refs.form.validate()
      await addYddArticleInfoApi(this.queryData)
      this.$message.success('添加成功')
      this.$router.push('/content_article')
      this.initData()
    },
    // 初始化数据
    async initData() {
      // 发起请求
      const res = await getyddTagListApi()
      const res1 = await getyddCateListApi()
      console.log('res:', res)
      console.log('res1:', res1)
      // 数据可能需要加工
      // 赋值
      this.taglist = res
      this.cateList = res1
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.queryData.page = 1
      // 拉取列表
      this.initData()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.queryData = {
        title: '',
        tags: '',
        create_date: '',
        page: 1,
        limit: 10
      }
      // 拉取列表
      this.initData()
    },
    // 修改事件
    async editRow(rowId) {
      // 获取改行的数据
      // const res = await getAdvPosInfoApi({ id: rowId })
      // 赋给弹框里面的表单
      // this.$refs.addForm.formData = res
      // 复杂点：一些负责的表单控件需要手动去回显
      // 打开弹框
      this.$refs.addForm.dialogShow = true
    },
    // 删除事件
    async delRow(rowId) {
      // 弹出确认框
      await this.$confirm('确认删除吗')
      // 发生删除请求
      // await delAdvPosInfoApi({ id: rowId })
      // 提示成功
      this.$message.success('删除成功')
      // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // 列表更新
      this.initData()
    },
    // 上传行为
    async httpRequest(result) {
      console.log(result)
      const fd = new FormData()
      fd.append('file', result.file)
      const res = await UploadFile(fd)
      this.queryData.pic = res.savePath
    },
    handleChange(value) {
      this.click = value
    }
  }
}
</script>
<style scoped>
.container {
  padding: 30px;
}
</style>
